<template>
  <div>
    <div class="upload-container">
      <div class="upload-container__box">
        <el-upload
          :multiple="false"
          :data="uploadParams('back')"
          :limit="1"
          :on-success="(res, file, fileList) => handleSuccess(res, file, fileList, 'front')"
          :action="baseUrl + 'api/v1/upload/file'"
          :show-file-list="true"
          :on-remove="(file) => onRemove(file, 'front')"
        >
          <div class="upload">
            <div v-if="!result.front" style="display: flex; flex-direction: column; justify-content: center;">
              <i class="el-icon-upload" />
              身份证反面照片（国徽面）
            </div>
            <el-image v-else :src="result.front.data.path" />
          </div>
        </el-upload>
      </div>

      <div class="upload-container__box">
        <el-upload
          :multiple="false"
          :limit="1"
          :data="uploadParams('front')"
          :on-success="(res, file, fileList) => handleSuccess(res, file, fileList, 'back')"
          :action="baseUrl + 'api/v1/upload/file'"
          :show-file-list="true"
          :on-remove="(file) => onRemove(file, 'back')"
        >
          <div class="upload">
            <div v-if="!result.back" style="display: flex; flex-direction: column; justify-content: center;">
              <i class="el-icon-upload" />
              身份证反面照片（人像面）
            </div>
            <el-image v-else :src="result.back.data.path" />
          </div>
        </el-upload>
      </div>
    </div>
    <div v-if="idCardInfo" style="margin-top: 10px;">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{ idCardInfo.name || '' }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ idCardInfo.number || '' }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ idCardInfo.sex || '' }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{ idCardInfo.ethnicity || '' }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ idCardInfo.birth || '' }}</el-descriptions-item>
        <el-descriptions-item label="到期时间">{{ idCardInfo.valid_to || '' }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      baseUrl: '',
      idCardInfo: null,
      result: {
        front: null,
        back: null
      }
    }
  },
  computed: {
    uploadParams() {
      return (type) => {
        return {
          folder: 'oa-idcard',
          type: 'idcard',
          idcardType: type,
          analysis: true
        }
      }
    }
  },
  created() {
    this.baseUrl = process.env.VUE_APP_UPLOAD
  },
  methods: {
    handleSuccess(...args) {
      const res = args[0]
      if (!res.data.analysis.result) return this.$message.error('识别失败，请上传正确的身份证！')
      if (res.code === 200) this.$message.success('上传成功！')
      const info = res.data.analysis.result
      this.idCardInfo = { ...this.idCardInfo, ...info }
      if (args[3] === 'front') {
        this.result.front = res
      } else {
        this.result.back = res
      }
    },
    onRemove(file, type) {
      this.result[type] = null
    },
    onConfirm() {
      return this.result
    }
  }
}
</script>
<style lang="scss">
.upload-container {
  display: flex;
  justify-content: center;
  &__box {
    //flex: 1;
    margin: 0 10px;
    .upload {
      width: 330px;
      border: 1px dashed #ccc;
      border-radius: 5px;
      height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: all .2s;
      &:hover {
        border: 1px dashed #1890ff;
      }
      .el-icon-upload {
        color: #c0c4cc;
        font-size: 60px;
      }
      em {
        color: #1890ff;
      }
    }
  }
}
</style>
